<!--
 * @Author: xiaodong 565071984@qq.com
 * @Date: 2022-05-09 21:35:06
 * @LastEditors: xiaodong 565071984@qq.com
 * @LastEditTime: 2022-05-14 18:12:32
 * @FilePath: /ywl/Volumes/ExtremeSSD/项目/小票/src/views/systemManagement/roleManagement/components/UserManagementEdit.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="800px"
    @close="close"
  >
    <div v-if="dialogSceneNumVisible">
      <el-form
        ref="form"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="场次名称">
          <el-input
            v-model="sceneNumName"
            autocomplete="off"
            :disabled="addOrEdit"
          ></el-input>
        </el-form-item>
        <el-form-item label="场次时间">
          <el-time-select
            v-model="sceneNumTime"
            :picker-options="{
              start: '08:00',
              step: '00:15',
              end: '23:30',
            }"
            placeholder="选择时间"
          ></el-time-select>
        </el-form-item>
      </el-form>
    </div>
    <div v-else>
      <vab-query-form>
        <vab-query-form-right-panel :span="24">
          <el-button icon="el-icon-plus" type="primary" @click="handleAdd">
            {{ $t('order.newAdd') /*新增*/ }}
          </el-button>
        </vab-query-form-right-panel>
      </vab-query-form>
      <el-table v-loading="listLoading" :data="list">
        <!-- <el-table-column show-overflow-tooltip type="selection"></el-table-column> -->
        <el-table-column
          show-overflow-tooltip
          prop="name"
          :label="$t('order.nameOfSession') /*场次名称*/"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="end_time_s"
          :label="$t('order.deadline') /*截止时间*/"
        ></el-table-column>
        <el-table-column
          show-overflow-tooltip
          :label="$t('common.operate') /*操作*/"
          width="300"
        >
          <template #default="{ row }">
            <el-button type="text" @click="handleEdit(row, 'edit')">
              {{ $t('accountManage.edit') /*编辑*/ }}
            </el-button>

            <el-button type="text" @click="handleDelete(row)">
              {{ $t('accountManage.delete') /*删除*/ }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="close">
        {{ $t('common.cancel') /*取消*/ }}
      </el-button>
      <el-button type="primary" @click="save">
        {{ $t('common.sure') /*确 定*/ }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getSceneNumList, addSceneNum, editSceneNum } from '@/api/business.js'
import ChangciContent from '@/views/systemManagement/roleManagement/components/changciContent.vue'
export default {
  name: 'RoleManagementEdit',
  components: {
    ChangciContent,
  },
  data() {
    return {
      form: {
        id: '',
      },
      rules: {
        permission: [
          { required: true, trigger: 'blur', message: '请输入权限码' },
        ],
      },
      title: '',
      dialogFormVisible: false,
      sceneNumName: '',
      sceneNumTime: '',
      dialogSceneNumVisible: false,
      listLoading: false,
      list: [],
      addOrEdit: 0, //0 添加 1修改
      nowItem: null,
    }
  },
  created() {},
  methods: {
    handleAdd() {
      this.dialogSceneNumVisible = true
      this.title = '添加场次'
      this.addOrEdit = 0
    },
    showEdit(row) {
      if (!row) {
        this.title = '设置场次1'
      } else {
        this.title = '场次列表'
        this.form = Object.assign({}, row)
        this.getList(row.sc_id)
      }
      this.dialogFormVisible = true
    },
    handleEdit(row) {
      this.title = '修改场次'
      this.addOrEdit = 1
      this.dialogSceneNumVisible = true
      this.nowItem = row
      this.sceneNumName = row.name
      this.sceneNumTime = row.end_time_s
    },
    onAddSceneNum() {
      if (this.sceneNumName.length == 0 || this.sceneNumTime.length == 0) {
        this.$baseMessage('select param', 'warm')
        return
      }
      let rq = {
        sc_id: this.form.sc_id,
        name: this.sceneNumName,
        end_time: this.sceneNumTime,
      }
      addSceneNum(rq).then((res) => {
        if (res.code == 0) {
          this.$baseMessage('success', 'success')
          this.dialogSceneNumVisible = false
          this.getList(this.form.sc_id)
          this.title = '设置场次'
        }
      })
    },
    onEditSceneNum() {
      if (this.sceneNumName.length == 0 || this.sceneNumTime.length == 0) {
        this.$baseMessage('select param', 'warm')
        return
      }
      let rq = {
        sc_id: this.form.sc_id,
        scn_id: this.nowItem.scn_id,
        end_time: this.sceneNumTime,
      }
      editSceneNum(rq).then((res) => {
        if (res.code == 0) {
          this.$baseMessage('success', 'success')
          this.dialogSceneNumVisible = false
          this.getList(this.form.sc_id)
          this.title = '设置场次'
        }
      })
    },
    getList(sc_id) {
      getSceneNumList({ sc_id }).then((res) => {
        if (res.code == 0) {
          this.list = res.data
        }
      })
    },
    close() {
      if (this.dialogSceneNumVisible) {
        this.dialogSceneNumVisible = false
        return
      }
      // this.$refs['form'].resetFields()
      // this.form = this.$options.data().form
      this.dialogFormVisible = false
    },
    save() {
      if (this.dialogSceneNumVisible) {
        if (this.addOrEdit == 0) this.onAddSceneNum()
        else this.onEditSceneNum()
      } else this.close()
      // this.$refs['form'].validate(async (valid) => {
      //   if (valid) {
      //     const { msg } = await doEdit(this.form)
      //     this.$baseMessage(msg, 'success')
      //     this.$emit('fetch-data')
      //     this.close()
      //   } else {
      //     return false
      //   }
      // })
    },
  },
}
</script>
